<template>
    <h1>商品分页</h1>
    <el-table :data="list" style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="proid" label="编号" width="200" />
        <el-table-column label="图片" width="100">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" width="250" />
        <el-table-column prop="brand" label="品牌" width="160" />
        <el-table-column prop="originprice" label="价格" width="80" />
        <el-table-column prop="discount" label="折扣" width="80" />
        <el-table-column prop="sales" label="销量" width="100" />
        <el-table-column prop="stock" label="库存" width="100" />
        <el-table-column label="是否推荐" v-if="crud.charAt(5)==='1'">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0" class="ml-2"
                    @change="(val: number) => updateisrecommend(scope.row.proid, val)" />
            </template>
        </el-table-column>
        <el-table-column label="是否秒杀" v-if="crud.charAt(6)==='1'">
            <template #default="scope">
                <el-switch v-model="scope.row.isseckill" :active-value="1" :inactive-value="0" class="ml-2"
                    @change="(val: number) => updateisseckill(scope.row.proid, val)" />
            </template>
        </el-table-column>
    </el-table>
    <el-pagination :page-size="params.limitNum" :pager-count="11" layout="prev, pager, next" :total="total"
        @current-change="changePage" />
</template>

<script setup lang="ts">
import { admin_pro_list, admin_pro_updateFlag } from "../../../utils/api";
import { reactive, ref } from "vue";
import { ElNotification } from 'element-plus'
import "element-plus/es/components/notification/style/css"
import {useRoute} from "vue-router";
const $router = useRoute();
const crud:string = ($router.meta.crud as string);
// 定义数据类型
interface IGoods {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}
// 定义保存数据
const list = reactive<IGoods[]>([]);
// 定义保存分页的数据及类型
const params = reactive<{
    count: number,
    limitNum: number
}>({
    count: 1,
    limitNum: 8
})
// 定义总数量
const total = ref(0);
// 获取商品的列表
const getgoods = () => {
    admin_pro_list(params).then((res: any) => {
        if (res.data.code) {
            total.value = res.data.total;
            list.length = 0;
            list.push(...res.data.data);
        }
    })
}
getgoods()
// 当点击页数显示当页内容
const changePage = (value: number) => {
    // console.log("value",value);
    params.count = value;
    getgoods();
}
// 更新商品推荐状态
const updateisrecommend = (proid: string, val: number) => {
    admin_pro_updateFlag({
        proid: proid,
        type: "isrecommend",
        flag: val
    }).then((res: any) => {
        if (res.data.code === "200") {
            // 判断一下Val的值
            if (val == 1) {
                ElNotification({
                    title: "提示",
                    message: "推荐成功",
                    type: "success",
                })
            } else {
                ElNotification({
                    title: "提示",
                    message: "取消推荐",
                    type: "success",
                })
            }
        }
    })
}
const updateisseckill = (proid: string, val: number) => {
    admin_pro_updateFlag({
        proid: proid,
        type: "isseckill",
        flag: val
    }).then((res: any) => {
        if (res.data.code === "200") {
            if (val == 1) {
                ElNotification({
                    title: "提示",
                    message: "更新秒杀成功",
                    type: "success",
                })
            } else {
                ElNotification({
                    title: "提示",
                    message: "取消秒杀",
                    type: "success",
                })
            }
        }
    })
}
</script>

<style  scoped>
.img {
    width: 50%;
    height: 50%;
}
</style>